<template>
  <div style="width:450px;height:350px;border:1px solid #ccc;margin:10px" ref="main"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data(){
        return{
            dataMax:[
                {name:'动力',max:100},
                {name:'油耗',max:100},
                {name:'内饰',max:100},
                {name:'空间',max:100},
                {name:'价格',max:100},
            ],
            honda:[80,89,78,90,88],
            byd:[70,90,88,67,100]
        }
    },
    computed:{
        options(){
            return{
                radar:{
                    indicator:this.dataMax,
                    shape: 'circle',
                    startAngle :270,
                    axisLine: {
                        show: true, 
                    },
                },
                series:[
                    {
                        type:'radar',
                        data:[
                            {name:'honda',value:this.honda},
                            {name:'byd',value:this.byd}
                        ],
                        itemStyle:{
                            color:'red'
                        }
                    }
                ]
            }
        }
    },
    mounted(){
        const mychart=echarts.init(this.$refs.main)
        mychart.setOption(this.options)
    }
}
</script>

<style>

</style>